import G6 from '@antv/g6';
import { Message } from 'element-ui';
// 自定义Behavior
G6.registerBehavior('activate-node',{
    getDefaultCfg(){
        return {
            multiple:true  
        }
    },
    getEvents(){
        return {
        'node:click':'onNodeClick',
        'canvas:click':'onCanvasClick',
        'node:contextmenu':'onContextmenu',
        'canvas:dragstart': 'onCanvasDragStart'
        }
    },
    onNodeClick(e){
        this.handleNodeStyle(e)
        this.hideBox();
    },
    onContextmenu(e){
        this.handleNodeStyle(e)
    },
    onCanvasClick(e){
        if(this.shouldUpdate(e)){
            this.removeNodesState();
        }
    },
    onCanvasDragStart(){
        this.hideBox();
    },
    removeNodesState(){
        this.graph.findAllByState('node','active').forEach(node => {
        this.graph.setItemState(node,'active',false)
        })
    },
    handleNodeStyle(e){
        const graph = this.graph;
        const item = e.item;
        if(item.hasState('active')){
            graph.setItemState(item,'active',false)
        }
        if(this.multiple){
            this.removeNodesState();
        }
        graph.setItemState(item,'active',true)
    },
    hideBox(){
        let nodeMenu = document.getElementById("nodeContextMenu");
        nodeMenu.style.display = "none";
    },
})
export default class kgGraph extends G6.Graph {
    targetNodeName = '';
    radius = 0;
    expandNode(item, expandData, targetNodeName) {
        if (this.targetNodeName !== item.getModel().label) {
            this.radius = 200;
        } else {
            this.radius = this.radius + 100;
        }
        const prevData = {
            nodes: this.getNodes().map((node) => node.getModel()),
            edges: this.getEdges().map((edge) => edge.getModel()),
        };
        const targetNode = prevData.nodes.find(node => node.id === item.getModel().id);
        const centerNode = prevData.nodes.find(node => node.label === targetNodeName);
        const tagValue = (Math.atan2((centerNode.y - targetNode.y), (targetNode.x - centerNode.x))) * (180 / Math.PI)
        this.getNodes().forEach((node) => {
            const model = node.getModel();
            model.fx = model.x;
            model.fy = model.y;
        });
        let t = 0
        let count = 0
        expandData.nodes.forEach((node) => {
            prevData.nodes.forEach(item => {
                if (item.id === node.id) {
                    count++;
                }
            })
        })
        if (expandData.nodes.length - count === 0) {
            Message({
                message: '已经加载完成',
                type: 'warning'
              });
        }
        const eachLimit = tagValue === 0 ? 360 / (expandData.nodes.length - count + 1) : 150 / (expandData.nodes.length - count + 1)
        expandData.nodes.forEach((node) => {
            if (!prevData.nodes.some((item) => item.id === node.id)) {
                t = t + 1
                let limit = (tagValue + 15 + eachLimit * t) * Math.PI / 180;
                this.addItem('node', {
                    ...node,
                    x: targetNode.x + Math.sin(limit) * this.radius,
                    y: targetNode.y + Math.cos(limit) * this.radius,
                });
            }
        });
        expandData.edges.forEach((edge) => {
            if (!prevData.edges.some((item) => item.source === edge.source && item.target === edge.target)) {
                this.addItem('edge', edge);
            }
        });
        this.getNodes().forEach((node) => {
            const model = node.getModel();
            model.fx = undefined;
            model.fy = undefined;
        });
    }
}